<template>
	<view >
		<custom-navigation-bar title="订单列表"></custom-navigation-bar> 
		<view class="top_1">
			<view class="top_2"> 
				<view v-for="(item,index) in statusArr" :key="index">
					<view v-if="item.id==status" class="top_3 top_3_se">
						{{item.name}}
					</view>
					<view v-if="item.id!=status" class="top_3">
						{{item.name}}
					</view>
				</view> 
			</view> 
		</view> 
		<view style="width: 100%;float: left;margin-top: 220rpx;"></view>
		<view class="list-item">
			<view class="list-shop-img">
				<image src="../../static/hd1.png" class="list-shop-img1"></image>
			</view>
			<view class="list-item-content">
				<view class="list-item-content-title">
					这个是商品名称  
					<label class="status_def">待付款</label>
				</view>
				<view class="list-item-content-v">
					订单金额：9.9&nbsp;&nbsp;数量：1
				</view> 
				<view class="list-item-content-v">
					下单时间：2024年6月20日15:05:33
				</view>
			</view> 
			<view class="list-item-btn-box">
				<view class="list-item-btn">
					联系买家
				</view>
				<view class="list-item-btn">
					订单详情
				</view>
			</view>
		</view>
		
		<view class="list-item">
			<view class="list-shop-img">
				<image src="../../static/hd1.png" class="list-shop-img1"></image>
			</view>
			<view class="list-item-content">
				<view class="list-item-content-title">
					这个是商品名称  
					<label class="status_def">待使用</label>
				</view>
				<view class="list-item-content-v">
					订单金额：9.9&nbsp;&nbsp;数量：1
				</view> 
				<view class="list-item-content-v">
					下单时间：2024年6月20日15:05:33
				</view>
				<view class="list-item-content-v">
					支付时间：2024年6月20日15:05:33
				</view>
			</view> 
			<view class="list-item-btn-box">
				<view class="list-item-btn">
					联系买家
				</view>
				<view class="list-item-btn">
					订单详情
				</view>
			</view>
		</view>
		
		<view class="list-item">
			<view class="list-shop-img">
				<image src="../../static/hd1.png" class="list-shop-img1"></image>
			</view>
			<view class="list-item-content">
				<view class="list-item-content-title">
					这个是商品名称  
					<label class="status_def">申请退款</label>
				</view>
				<view class="list-item-content-v">
					订单金额：9.9&nbsp;&nbsp;数量：1
				</view> 
				<view class="list-item-content-v">
					下单时间：2024年6月20日15:05:33
				</view>
				<view class="list-item-content-v">
					申请时间：2024年6月20日15:05:33
				</view> 
			</view> 
			<view class="list-item-btn-box">
				<view class="list-item-btn">
					联系买家
				</view>
				<view class="list-item-btn">
					订单详情
				</view>
			</view>
		</view>
		
		<view class="list-item">
			<view class="list-shop-img">
				<image src="../../static/hd1.png" class="list-shop-img1"></image>
			</view>
			<view class="list-item-content">
				<view class="list-item-content-title">
					这个是商品名称  
					<label class="status_def">退款成功</label>
				</view>
				<view class="list-item-content-v">
					订单金额：9.9&nbsp;&nbsp;数量：1
				</view> 
				<view class="list-item-content-v">
					下单时间：2024年6月20日15:05:33
				</view>
				<view class="list-item-content-v">
					退款时间：2024年6月20日15:05:33
				</view> 
			</view> 
			<view class="list-item-btn-box">
				<view class="list-item-btn">
					联系买家
				</view>
				<view class="list-item-btn">
					订单详情
				</view>
			</view>
		</view>
		
		<view class="list-item">
			<view class="list-shop-img">
				<image src="../../static/hd1.png" class="list-shop-img1"></image>
			</view>
			<view class="list-item-content">
				<view class="list-item-content-title">
					这个是商品名称  
					<label class="status_def">已完成</label>
				</view>
				<view class="list-item-content-v">
					订单金额：9.9&nbsp;&nbsp;数量：1
				</view> 
				<view class="list-item-content-v">
					支付时间：2024年6月20日15:05:33
				</view>
				<view class="list-item-content-v">
					使用时间：2024年6月20日15:05:33
				</view> 
			</view> 
			<view class="list-item-btn-box">
				<view class="list-item-btn">
					联系买家
				</view>
				<view class="list-item-btn">
					订单详情
				</view>
			</view>
		</view>
		
		<view style="width: 100%;height: 60rpx;float: left;"></view>
	</view>
</template>

<script setup>
	import CustomNavigationBar from '@/components/CustomNavigationBar.vue'; 
	import { ref } from "vue"; 
	import http from '../../utils/http';
	
	const statusArr=ref([
		{
			id:null,
			name:'全部'
		},
		{
			id:0,
			name:'待付款'
		},
		{
			id:1,
			name:'待使用'
		},
		{
			id:2,
			name:'已完成'
		},
		{
			id:3,
			name:'退款'
		},
		{
			id:5,
			name:'已评论'
		}
	]);
	console.log(statusArr.value)
	const status=ref(null);
	const pageIndex=ref(1);
	const pageSize=ref(10);
	import {
		onLoad,
		onPageScroll
	} from '@dcloudio/uni-app';
	onLoad((query) => {
		status.value=query.status;
		console.log(status.value); 
	})
	function setStatus(value){
		status.value=value;
	}
	
</script>

<style>
	@import "../list/list.scss"; 
	
	.top_1{
		position:fixed;top:150rpx;left:0rpx;height:80rpx;width: 100%;
	}
	.top_2{
		height:70rpx; width:100%;overflow-x:scroll;overflow-y:hidden;white-space:nowrap;background: white;font-size: 26rpx;font-weight: bold;
	}
	.top_3{
		background-color:#fff;width:120rpx;margin-right:30rpx;display:inline-block;text-align: center;line-height: 70rpx;
	}
	.top_3_se{
		background-color:#fff;width:120rpx;margin-right:30rpx;display:inline-block;text-align: center;line-height: 70rpx;color: #2AE8DC;
	}
</style>